<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/login.css">
</head>
<body>
<div class="wrap">

    <!--    登录页面-->
    <div class="_login">
        <h3>用户登录</h3>
        <labe for="userAccount">账号</labe>
        <input type="text" class="userAccount" id="userAccount_login" placeholder="Account">
        <labe for="userPassword">密码</labe>
        <input type="password" class="userPassword" id="userPassword_login" placeholder="Password">
        <button class="login">登录</button>
        <p>没有账号？点击立即<span class="registerInLogin">注册</span></p>
    </div>

    <!--    注册页面-->
    <div class="_register">
        <img src="./img/back.png" class="icon">
        <labe for="userAccount_register" class="account">账号</labe>
        <input type="text" class="_account" id="userAccount_register" placeholder="Account">
        <labe for="userPassword_register">密码</labe>
        <input type="password" class="_password" id="userPassword_register" placeholder="Password">
        <labe>头像</labe>
        <button class="avatar_selector">请选择头像</button>
        <button class="register_selector">注册</button>
        <div class="">
            <div class="shape"></div>
        </div>
        <div class="expressionbox">
            <div class="tr">
                <img src="./img/avatar1.png" alt="">
                <img src="./img/avatar2.png" alt="">
                <img src="./img/avatar3.png" alt="">
                <img src="./img/avatar4.png" alt="">
                <img src="./img/avatar5.png" alt="">
            </div>
            <div class="tr">
                <img src="./img/avatar6.png" alt="">
                <img src="./img/avatar7.png" alt="">
                <img src="./img/avatar8.png" alt="">
                <img src="./img/avatar9.png" alt="">
                <img src="./img/avatar10.png" alt="">
            </div>
        </div>
    </div>
</div>

<script>
    let baseURL = 'http://127.0.0.1:8888';
    // let baseURL = '192.168.18.185:8888';

    //登录按钮
    let loginBtn = document.querySelector('.login');

    //登录页面的注册按钮
    let registerInLogin = document.querySelector('.registerInLogin');
    registerInLogin.onclick = function () {
        document.querySelector('._login').style.display = 'none';
        document.querySelector('._register').style.display = 'block';
    }

    let avatarImgS = document.querySelectorAll('.expressionbox img');

    //初始化头像选中事件
    avatarImgS.forEach((item, index) => {
        item.onclick = function () {
            let beSelected = document.querySelector('.selected');
            if (beSelected) {
                beSelected.classList.remove('selected');
            }
            item.classList.add('selected');
           //改变头像
            document.querySelector('.shape').style.backgroundImage = `url(../img/avatar${index+1}.png)`
            //隐藏头像框
            document.querySelector('.expressionbox').style.display = 'none';
        }
    })
    // 注册按钮
    let registerBtn = document.querySelector('.register_selector');

    //返回按钮
    document.querySelector('._register>img').onclick = function () {
        document.querySelector('._register').style.display = 'none';
        document.querySelector('._login').style.display = 'block';
    }

    // 头像按钮选择
    document.querySelector('.avatar_selector').onclick = function () {
        if (document.querySelector('.expressionbox').style.display === 'flex'){
            document.querySelector('.expressionbox').style.display = 'none';
            return;
        }
        document.querySelector('.expressionbox').style.display = 'flex';
    }
    //注册按钮
    registerBtn.onclick = function () {
        // document.querySelector('.register').style.display ='none';
        let account = document.querySelector('._account').value;
        let password = document.querySelector('._password').value;
        let img = document.querySelector('.expressionbox .selected');
        //获取头像
        let avatar = img ? img.src : null;
        if (account.trim().length === 0) {
            alert('请输入账号');
            return;
        }
        if (password.trim().length === 0) {
            alert('请输入密码');
            return;
        }
        if (avatar === null) {
            alert('请选择头像');
            return;
        }
        let user = {
            account,
            password,
            avatar
        };
        console.log(user)
        let xhr = new XMLHttpRequest();
        xhr.open('post', baseURL + '/register');
        //设置响应头
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.send(JSON.stringify(user));
        xhr.onload = function () {
            console.log(xhr.response);
            let result = JSON.parse(xhr.response);
            if (result.ok === 1) {
                document.querySelector('._register').style.display = 'none';
                document.querySelector('._login').style.display = 'block';
            } else {
                alert('账号已存在，请重新注册');
            }

        }
    }

    //登录按钮
    loginBtn.onclick = function () {
        //头像
        let account = document.querySelector('.userAccount').value;
        let password = document.querySelector('.userPassword').value;
        if (account.trim().length === 0) {
            alert('请输入账号');
            return;
        }
        if (password.trim().length === 0) {
            alert('请输入密码');
            return;
        }
        let userInfo = {
            account,
            password
        };
        console.log(userInfo)
        let xhr = new XMLHttpRequest();
        xhr.open('post', `${baseURL}/login`);
        xhr.setRequestHeader('Content-Type', 'application/json');

        xhr.send(JSON.stringify(userInfo));
        xhr.onload = function () {
            let {account,avatar,ok} = JSON.parse(xhr.response);
            console.log(JSON.parse(xhr.response));
            if (ok === 1) {
                window.location.href = `${baseURL}?account=${account}&avatar=${avatar}`;
            } else {
                alert('账号密码错误')
            }
        }

    }
</script>
</body>
</html>